<template>
  <div class="category-wrapper">
    <!-- search -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      class="category-wrapper-search"
    />
    <!-- contsnt -->
    <section class="category-content">
      <!-- sidebar  -->
      <van-sidebar
        v-model="active"
        @change="onChange"
        class="category-content-left"
      >
        <van-sidebar-item title="标签名 1" />
        <van-sidebar-item title="标签名 2" />
        <van-sidebar-item title="标签名 3" />
      </van-sidebar>
      <!-- content -->
      <div class="category-content-right">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-card
              :num="item.num"
              :price="item.price"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.thumb"
              v-for="item in list"
              :key="item.num"
            >
              <template #tags>
                <van-tag plain type="danger">标签</van-tag>
              </template>
              <template #footer>
                <van-button size="mini">加入购物车</van-button>
              </template>
            </van-card>
          </van-list>
        </van-pull-refresh>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

// interface Goods {
//   num: string;
//   price: string;
//   desc: string;
//   title: string;
//   thumb: string;
// }

export default defineComponent({
  setup() {
    const value = ref("");
    const active = ref(0);
    const onSearch = () => {
      console.log(value.value);
    };
    const onChange = (index: number) => {
      console.log(`标签名 ${index + 1}`);
    };
    const list: any = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push({
            num: "2",
            price: "2",
            desc: "描述信息",
            title: "商品标题",
            thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          });
        }
        loading.value = false;

        if (list.value.length >= 20) {
          finished.value = true;
        }
      }, 1000);
    };
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

    return {
      value,
      active,
      onSearch,
      onChange,
      onRefresh,
      loading,
      finished,
      refreshing,
      onLoad,
      list,
    };
  },
});
</script>

<style lang="scss" scoped>
.category-wrapper {
  height: 100vh;
  padding: 50px 0;
}
.category-wrapper-search {
  position: fixed;
  top: 0;
  left: 0;
  height: 54px;
  width: 100%;
  z-index: 10;
}
.category-content {
  height: 100%;
  position: relative;
  overflow: hidden;

  .category-content-right {
    margin-left: 80px;
    overflow: auto;
    height: 100%;
  }
  .category-content-left {
    position: absolute;
    width: 80px;
    height: 100%;
    top: 0;
    left: 0;
  }
}
</style>
